<template>
	<view class="video-player">
		<video id="myVideo":autoplay="autoplay" @click="clickHandel" :loop="true" :controls="false" class="video-item" :src="video.src"></video>
	</view>
</template>

<script>
	let time =null;
	export default {
		props:['video','index'],
		name:"viderPlayer",
		data() {
			return {
				play:false,
				dbClick:false, //判断单击还是双击
				autoplay:false
			};
		},
		onReady(res) {
			this.videoContext = uni.createVideoContext('myVideo',this)
		},
		created() {
			this.auto()
		},
		methods:{
			clickHandel(){
				clearTimeout(time)
				this.dbClick = !this.dbClick
				time = setTimeout(()=>{
					if(this.dbClick){ //单击
						if(!this.play){
							this.playThis()
						}else{
							this.pause()
						}
					}else{
						console.log(2334651)
						// 双击
						this.$emit('changeMoreClick')
					}
					this.dbClick = false;
				},300)
			},
			player(){
				if(!this.play){
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			pause(){
				if(this.play){
				  this.videoContext.pause()
				  this.play = false
				}
			},
			playThis(){
				if(!this.play){
					this.videoContext.play();
					this.play = true
				}
			},
			auto(){
				if(this.index === 0){
					this.autoplay = true;
				}
			}
		}
	}
</script>

<style>
.video-player {
	width: 100%;
	height: 100%;
}

.video-item {
	width: 100%;
	height: 100vh;
}
</style>
